<template>
  <div class="hello-ezuikit-js">
    <div :id="randomId" :style="{width: width+'px', height: height+'px'}" ></div>
  </div>
</template>

<script>
import EZUIKit from "ezuikit-js";
import { uuid2 } from '@/utils/util.js'
export default {
  name: "EZUIKitJs",
  props: {
    msg: String,
    accessToken: String,
    url: String,
    width: Number,
    height: Number,
  },
  computed: {
    randomId() {
      return uuid2(16, 16)
    }
  },
  mounted(){
    console.group("mounted 组件挂载完毕状态===============》");
    let vm = this
    console.log(vm.randomId)
    var player =  new EZUIKit.EZUIKitPlayer({
      autoplay: true,
      id: vm.randomId,
      accessToken: vm.accessToken,
      url: vm.url,
      template: "simple", // simple - 极简版;standard-标准版;security - 安防版(预览回放);voice-语音版；
      // 视频上方头部控件
      //header: ["capturePicture", "save", "zoom"], // 如果templete参数不为simple,该字段将被覆盖
      //plugin: ['talk'],                       // 加载插件，talk-对讲
      // 视频下方底部控件
      // footer: ["talk", "broadcast", "hd", "fullScreen"], // 如果template参数不为simple,该字段将被覆盖
      // audio: 1, // 是否默认开启声音 0 - 关闭 1 - 开启
      // openSoundCallBack: data => console.log("开启声音回调", data),
      // closeSoundCallBack: data => console.log("关闭声音回调", data),
      // startSaveCallBack: data => console.log("开始录像回调", data),
      // stopSaveCallBack: data => console.log("录像回调", data),
      // capturePictureCallBack: data => console.log("截图成功回调", data),
      // fullScreenCallBack: data => console.log("全屏回调", data),
      // getOSDTimeCallBack: data => console.log("获取OSDTime回调", data),
      width: vm.width,
      height: vm.height
    });
    console.log("player",player);
    // setTimeout(()=>{
    //   player.stop(); // 方法调用示例，10秒后关闭视频
    // },10000)
  }
};
</script>
